<template>
  <view class="login-container">
    <image class="logo" :src="commonStore.baseImageUrl + 'test-yujia/common/login-logo.png'"></image>
    <button class="login-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"> 一键登入</button>
    <button class="login-btn-skip" plain @click="register">已有账号登录</button>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useCommonStore, useUserStore } from "@/store";
import { wxLoginAPI, wxRegisterAPI } from "@/apis/user"
import { onShow } from "@dcloudio/uni-app";

const commonStore = useCommonStore();
const userStore = useUserStore();
const loading = ref(false);

onMounted(() => {
  console.log("login page mounted");
  // 已登录则跳转
  if (userStore.token) {
    uni.switchTab({ url: "/pages/index/index" });
  }
});

// 用户授权获取位置信息
const getLocation = () => {
  // if (commonStore.locationInfo) {
  //   return;
  // }
  // uni.getLocation({
  //   type: 'wgs84',
  //   success: (res) => {
  //     console.log("位置信息", res);
  //     commonStore.setLocationInfo(res);
  //     setTimeout(() => {
  //       uni.switchTab({ url: "/pages/index/index" });
  //     }, 1500);
  //   }
  // })

  setTimeout(() => {
    uni.switchTab({ url: "/pages/index/index" });
  }, 500);
}

const getPhoneNumber = async (e) => {
  console.log("phone number", e);
  const { detail } = e;
  if (!detail.code) {
    register()
    // uni.showToast({
    //   title: '获取手机号失败',
    //   icon: 'none'
    // });

    return;
  }

  const phoneCode = detail.code;
  loading.value = true;

  try {
    uni.login({
      provider: "weixin",
      success: async (result) => {
        console.log("微信登录成功", {
          code: result.code,
          phoneCode
        });
        try {
          const { data, code } = await wxRegisterAPI({
            code: result.code,
            phoneCode
          });

          if (code === "200" && data) {
            userStore.setToken(data.token);
            userStore.setUserInfo(data.userInfo);
            uni.showToast({
              title: '登录成功',
              icon: 'success'
            });
            getLocation()


          } else {
            uni.showToast({
              title: '登录失败',
              icon: 'none'
            });
          }
        } catch (error) {
          console.error("登录API调用失败", error);
          uni.showToast({
            title: '登录失败',
            icon: 'none'
          });
        }
      },
      fail: (error) => {
        console.error("wx.login失败", error);
        uni.showToast({
          title: '微信登录失败',
          icon: 'none'
        });
      },
      complete: () => {
        loading.value = false;
      }
    });
  } catch (error) {
    console.error("登录过程错误", error);
    loading.value = false;
    uni.showToast({
      title: '登录过程错误',
      icon: 'none'
    });
  }
};

const register = () => {
  if (loading.value) return;

  loading.value = true;
  uni.login({
    provider: "weixin",
    success: async (result) => {
      try {
        const { data, code } = await wxLoginAPI({ code: result.code });
        if (code === "200" && data) {
          userStore.setToken(data.token);
          userStore.setUserInfo(data.userInfo);
          getLocation()
        } else {
          uni.showToast({
            title: '登录失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error("登录API调用失败", error);
        uni.showToast({
          title: '登录失败',
          icon: 'none'
        });
      }
    },
    fail: (error) => {
      console.error("wx.login失败", error);
      uni.showToast({
        title: '微信登录失败',
        icon: 'none'
      });
    },
    complete: () => {
      loading.value = false;
    }
  });
};

onShow(() => {
  userStore.logout();
});
</script>
<style lang="scss" scoed>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  position: relative;

  .logo {
    width: 294rpx;
    height: 366rpx;
    margin-top: -100rpx;
  }

  .login-btn {
    background: #8FB433;
    width: 294rpx;
    height: 84rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 84rpx;
    font-size: 32rpx;
    position: absolute;
    bottom: 190rpx;
    left: 50%;
    transform: translateX(-50%);
  }

  .login-btn-skip {
    background-color: transparent;
    color: #8FB433;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 84rpx;
    font-size: 24rpx;
    position: absolute;
    bottom: 50rpx;
    left: 50%;
    transform: translateX(-50%);
    // 重置按钮的所有边框相关样式
    border: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
    border-style: none !important;
    outline: none !important;

    // 重置按钮的其他默认样式
    padding: 0 !important;
    margin: 0 !important;
    line-height: normal !important;
    border-radius: 0 !important;
  }

  // 去除按钮点击时的效果
  &::after {
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
  }

  // 去除按钮激活状态的样式
  &.button-hover {
    background-color: transparent !important;
  }
}
</style>